<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>角色授权</title>
    <script src="../js/vue/dist/vue.min.js"></script>
    <script src="../js/element-ui/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/web-util.js"></script>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .el-row{
            margin-bottom: 20px;
        }
        .el-tree{
            border: 1px solid #DCDFE6;
            margin-right: 5px;
        }
        .el-main{
            padding: 0;
        }
        body{
            height: 85%;
            margin: 10px;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-container >
            <el-aside width="250px">
                <el-tree :data="roleTreeData" ref="deptTree" :props="treeProps" @node-click="clickRole" node-key="roleCode"
                         :highlight-current="true" :expand-on-click-node="false" default-expand-all></el-tree>
            </el-aside>
            <el-main>

                <el-tabs type="border-card">
                    <el-tab-pane label="角色权限">

                        <el-row>
                            <el-col :span="24">
                                <el-button type="primary" icon="el-icon-plus" @click="savePermission" size="small">授权</el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-tree
                                        ref="menuTree"
                                        :data="menuTreeData"
                                        show-checkbox
                                        node-key="id"
                                        default-expand-all
                                        :props="menuTreeProps">
                                </el-tree>
                            </el-col>
                        </el-row>

                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </template>
</div>
</body>
<script src="RolePermission.js" type="text/javascript"></script>
</html>

